import { Suspense } from 'react'
import { notFound } from 'next/navigation'
import { auth } from '@/auth'
import TeamManagement from '@/components/project/team-management'
import { Skeleton } from '@/components/ui/skeleton'
import { prisma, dbOperation } from '@/lib/db'

interface ProjectTeamPageProps {
  params: Promise<{
    id: string
  }>
}

export default async function ProjectTeamPage({ params }: ProjectTeamPageProps) {
  const { id } = await params;
  const session = await auth()
  
  if (!session?.user) {
    return notFound()
  }
  
  // 验证用户是否为项目成员
  const userProjectRole = await dbOperation(async () => {
    return prisma.projectUser.findFirst({
      where: {
        projectId: id,
        userId: session.user.id,
      },
      include: {
        project: {
          select: {
            name: true,
            description: true,
          },
        },
      },
    })
  })

  if (!userProjectRole.success || !userProjectRole.data) {
    return notFound()
  }

  const project = userProjectRole.data.project
  
  return (
    <div className="container py-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2">{project.name} - 团队管理</h1>
        {project.description && (
          <p className="text-muted-foreground">{project.description}</p>
        )}
      </div>
      
      <Suspense fallback={<TeamManagementSkeleton />}>
        <TeamManagement projectId={id} />
      </Suspense>
    </div>
  )
}

function TeamManagementSkeleton() {
  return <Skeleton className="h-96 w-full" />
} 
